<template>
	<div class='modal-dialog'>
		<div class='modal-content'>
			<div class='modal-header'>
				<span class='header-title'>手机号绑定</span>
				<span class="icon icon-close" bindtap="_hiddenModel"></span>
			</div>

			<div class='modal-body'>
				<form class='form-group'>
					<div class='input-group'>
						<img class='icon-login' src='../../../../static/img/icon/phone@1x.svg' />
						<input type='number' placeholder='请输入手机号' class='input-box' data-name="loginData.member_mobile" bindinput='_changeInputValue'></input>
					</div>
					<div class='input-group'>
						<img class='icon-login' src='../../../../static/img/code.svg' />
						<input type='span' placeholder='请输入验证码' class='input-box' data-name='loginData.code' bindinput='_changeInputValue'></input>
						<div class='send-code-btn' catchtap='sendCode'><span>获取验证码</span></div>
					</div>
					<div class='input-btn-group'>
						<button class='login-btn' catchtap='_loginCode'>登录</button>
					</div>
					<div class='tab-btn' @click='goUsernameLogin'>
						<span class=''>账号密码登录</span>
						<div class='triangle'></div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			goUsernameLogin(){
				this.$emit("userPhoneCodeChoose",false)
			}
		}
	}
</script>

<style scoped lang="scss">
	.modal-dialog {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		.modal-content {
			width: 670px;
			background-color: #fff;
			border-radius: 8px;
			.modal-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40px 50px 10px;
				.header-title{
					font-family: PingFangSC-Regular;
					font-size: 40px;
					color: #4A4A4A;
					letter-spacing: 0.43px;
					text-align: left;
				}
			}
			.modal-body {
				padding: 0 50px;
				.form-group {
					.input-group {
						position: relative;
						display: flex;
						height: 100px;
						align-items: center;
						box-shadow: 0 2px #e5e5e5;
						padding-bottom: 30px;
						padding-top: 45px;
						.icon-login {
							flex-shrink: 0;
							width: 40px;
							height: 40px;
							margin-right: 20px;
						}
						.input-box {
							padding-left: 20px;
							padding-right: 20px;
							font-size: 30px;
							color: #9b9b9b;
						}
						.send-code-btn {
							position: absolute;
							right: 0;
							overflow: hidden;
							flex-shrink: 0;
							width: 180px;
							height: 70px;
							text-align: center;
							line-height: 70px;
							color: #4a4a4a;
							font-size: 28px;
							border: 2px solid #e6e6e6;
							border-radius: 4px;
							box-sizing: border-box;
						}
					}
					.input-btn-group {
						padding: 50px 0;
						.login-btn {
							width: 549px;
							height: 88px;
							color: #fff;
							font-size: 30px;
							background: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
							box-shadow: 0 20px 20px 0 rgba(244, 63, 92, 0.15);
							border-radius: 8px;
						}
					}
					.tab-btn {
						padding-bottom: 50px;
						display: flex;
						justify-content: center;
						align-items: center;
						span {
							height: 100%;
							color: #9b9b9b;
							font-size: 30px;
							margin-right: 10px;
						}
						.triangle {
							position: relative;
							width: 0;
							height: 0;
							border-left: 18px solid #68676c;
							border-top: 12px solid transparent;
							border-bottom: 12px solid transparent;
						}
						.triangle::after {
							position: absolute;
							left: -16px;
							top: -8px;
							width: 0;
							height: 0;
							border-left: 12px solid #fff;
							border-top: 8px solid transparent;
							border-bottom: 8px solid transparent;
							content: "";
							z-index: 2000;
						}
					}
				}
			}
		}
	}
</style>